<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <script src="/js/jquery-1.7.2.min.js"></script><!--就用元素状态的，不然会加载不了js-->
    <script src="/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<button type="button" class="layui-btn layui-btn-warm"><a th:href="@{/client/user}">查看用户列表</a></button>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        var layer=layui.layer;

        table.render({
            elem: '#test'
            ,url:'/client/order/findall'
            ,title: '菜单列表'
            ,cols: [
                [
                    {field:'id', width:100, title: '编号', sort: true}
                    ,
                    ,{field:'mid', width:100, title: '菜单名',templet(data){
                        return data.menu.name
                    }}
                    ,{field:'date', width:100, title: '下单时间'}
                    ,{field:'state',width:100,  title: '状态',templet(data){
                        var result="";
                        if(data.state==0){
                            result="未派送";
                        }else{
                            result="派送中";
                        }
                        return result;
                    }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
                ] /*要分开着两个中括号*/
            ]
            ,page: true
            ,limit: 7
            ,limits: [15,20,30]

        });

        //监听行工具事件
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'order'){ //添加
                console.log("点击了预定");
                window.location.href="/client/order/"+data.id;
                //do somehing
            } else if(layEvent === 'delete'){ //删除]
                console.log("点击了删除");
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    window.location.href="/client/delete/"+data.id;
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //修改
                //do something
                console.log(data);
                window.location.href='/client/upd/'+data.id;//跳转到修改界面
                //同步更新缓存对应的值
                /*  obj.update({
                      username: '123'
                      ,title: 'xxx'
                  });*/
            }else if(layEvent === 'insert'){ //修改
                //do something
                console.log(data);
                window.location.href='/client/add';

            }
        });
    });
</script>
</body>
</html>